import CardTitle from '@/components/CardTitle';
import { homeBulletin } from '@/services/api/api-home';
import { Link, useAccess } from '@umijs/max';
import { Avatar, Card, List, Tag } from 'antd';
import moment from 'moment';
import { useEffect, useRef, useState } from 'react';
import styles from '../../style.less';
import DetailsRecord from '@/pages/instruct/record/DetailsRecord';
import { ActionType, ProList } from '@ant-design/pro-components';

interface BulletinBoardProps {
  value?: any;
  onChange?: (value: any) => void;
}

const BulletinBoard: React.FC<BulletinBoardProps> = ({ value, onChange }) => {
  const access = useAccess();

  /**
   * 通知栏
   */
  const [bulletinData, setBulletinDataState] = useState<InstructRecordData.PageVo[]>();
  const action = useRef<ActionType>();
  useEffect(() => {
    bulletin();
  }, []);

  const bulletin = async () => {
    const response = await homeBulletin();
    if (response.code == 0) {
      setBulletinDataState(response.data.data);
    }
  };
  const renderPushs = (item: InstructRecordData.PageVo) => {

    return (
      <>
        <Card key={item.id} style={{ width: '100%' }} bordered={false}>
          <Card.Meta
            // className={styles.projectItemDescription}
            avatar={<Avatar src={item.createdOrganizationAvatar} />}
            title={
              <>
                <span>
                  {item.isView != undefined && (
                    <Tag color={item.isView == 0 ? '#F9CF59' : '#1AA15F'} key="item.isView">
                      {item.isView == 0 ? '未阅读' : '已阅读'}
                    </Tag>
                  )}
                  {/* <a className={styles.username}>{item.name}</a> */}
                  {/* <BulletinDetailsDrawerForm
                    id={item.id}
                    render={`${item.name}`}
                    onClose={() => {
                      bulletin();
                    }}
                  /> */}
                  <DetailsRecord
                    item={item}
                    onClose={() => {
                      bulletin()
                      action.current?.reload()
                    }}
                  />
                  <br />
                  {/* {item?.content ? (
                    <div
                      style={{
                        fontSize: '15px',
                        fontWeight: 'normal',
                        display: '-webkit-box',
                        WebkitLineClamp: 2,
                        WebkitBoxOrient: 'vertical',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'normal',
                        marginBottom:-20
                      }}
                      dangerouslySetInnerHTML={{
                        __html: `${item?.content}`,
                      }}
                    />
                  ) : (
                    <></>
                  )} */}
                  {/* <span style={{
                    fontSize: '10px',
                    fontWeight: 'normal',
                    display: '-webkit-box',
                    WebkitLineClamp: 2,
                    WebkitBoxOrient: 'vertical',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'normal'
                  }}>
                    {item.content}

                  </span> */}
                </span>
              </>
            }
            description={
              <>
                <span className={styles.datetime} title={item.createdTime}>
                  发布时间:
                  <span style={{ marginLeft: '5px' }}>
                    {moment(item.createdTime).format('YYYY-MM-DD')}
                  </span>
                </span>
                <span style={{ marginLeft: '5px' }}>
                  发布人:
                  <span style={{marginLeft: '5px' }}>
                    {item.createdAccountName}
                  </span>
                </span>
                {/* {access.市委宣传部通知x管理员 && <span style={{ marginLeft: '5px' }}>
                </span>} */}

              </>
            }
          />
        </Card>
      </>
    );
  };

  return (
    <>
      <Card
        title={<CardTitle>市委宣传部通知</CardTitle>}
        bordered
        bodyStyle={{ padding: 0 }}
        extra={<Link to="/instruct">全部</Link>}
      // style={{marginTop:'10px'}}
      >
        <ProList
          ghost
          renderItem={(item) => renderPushs(item)}
          dataSource={bulletinData?.slice(0, 3)}
          actionRef={action}
          // className={styles.activitiesList}
          size="large"
        />
      </Card>
      <br />
    </>
  );
};

export default BulletinBoard;
